<template>
	<!-- 页面整体容器 -->
	<div class="land-page">
		<!-- 种类选择部分 -->
		<view class="baseType-list">
			<up-subsection :list="baseTypeList" current="currBaseType" activeColor="rgb(0,200,83)"  @change="baseTypeChange"></up-subsection>
		</view>
		<!-- 搜索 -->
		<view class="search-container">
			<u-search v-model="searchValue" :shape="'square'" :bg-color="'#dedede'" placeholder="请输入名称"
				@search="onSearch" :border-radius="'16rpx'" />
		</view>
		<view class="container">
			<!-- 组件 -->
			<LandComponent v-for="item in shareList" :key="item.baseId" :base="item"></LandComponent>
		</view>
        <bottomVue></bottomVue>
	</div>
</template>

<script setup>
	import {ref} from 'vue';
	import * as axios from '@/common/api.js';
	// 导入组件
	import LandComponent from '@/component/landComponent.vue'; // 这里的路径根据您的项目结构进行修改
	// 底边导航栏组件
	import bottomVue from '@/component/bottom.vue';
	//空闲地的头顶的基地类型
	const baseTypeList = ref(['蔬菜区', '有机土地', '果树区','茶树区']);
	//默认基地类型是第一个
	const currBaseType = ref(0);
	//显示蔬菜基地的传参对象
	const baseList ={
		regionId:1,
		baseType:'',
		input:'',
		size:2,
		currentPage:1,
	};
	// 定义响应式变量 searchQuery，存储搜索框中的内容
	const searchQuery = ref("");
	// 搜索
	const searchValue = ref('');
	
	//点击改变当前的页
	const baseTypeChange=(index) =>{
		currBaseType.value = index
		//赋值
		baseList.baseType = baseTypeList.value[index];
		console.log(baseList);
	}
	// 定义函数 selectCategory，处理用户选择某个分类的逻辑
	const selectCategory = (category) => {
		console.log(`Selected category: ${category.name}, ID: ${category.id}`);
	};
	// 搜索方法  
	const onSearch = (value) => {
		// 在此处理搜索逻辑
		baseList.input = value;
	};
	//   土地的假数据
	const shareList =ref([]);
	//一进空闲地显示蔬菜基地
	const showBaseList=()=>{
		baseList.baseType = baseTypeList.value[currBaseType.value]
		console.log(baseList.baseType);
		axios.showBaseList(baseList).then(res => {
			console.log("返回的显示列表", res);
			shareList.value = res.data; 	
			console.log(shareList.value);
		}).catch(err => {
			console.log(err);
		})
		
	}
	showBaseList();
</script>

<style scoped>
	.container {
		margin-top: 10px;
	 /* width: 94%; */ /* 设置宽度为页面的94% */
	   margin: 0 auto; /* 水平居中 */
	}
	.baseType-list{
		width: 100%;
	}
	.search-container {
		width: 105%;
		padding-left: 16px;
		margin-top: 10px;
	}
	
	/* 页面整体样式 */
	.land-page {
		font-family: Arial, sans-serif;
	}

	/* 搜索框部分样式 */
	.search-bar {
		display: flex;
		padding: 10px;
		background-color: #f0f0f0;
	}

	.search-bar input {
		flex: 1;
		padding: 8px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	/* 分类部分样式 */
	.categories {
		display: flex;
		background-color: #00C853;
		padding: 10px;
		overflow-x: auto;
		/* 当分类项过多时，允许横向滚动 */
	}

	.category {
		margin-right: 20px;
		font-size: 16px;
		color: white;
		white-space: nowrap;
		cursor: pointer;
		/* 鼠标悬停时显示为可点击 */
	}

	/* 排序选项部分样式 */
	.sort-options {
		display: flex;
		background-color: #ffffff;
		padding: 10px;
	}

	.sort-option {
		margin-right: 15px;
		font-size: 14px;
		cursor: pointer;
		font-weight: bold;
		color: #000000;
	}

	/* 激活的排序选项样式 */
	.sort-option.active {
		color: #00a84f;
		font-weight: bold;
	}
</style>